import React from 'react';
import { Card, Progress, Tag } from 'antd';

const TaskWidget: React.FC = () => {
  const tasks = [
    { id: 1, title: '完成项目文档', progress: 80, priority: 'high' },
    { id: 2, title: '代码审查', progress: 60, priority: 'medium' },
    { id: 3, title: '测试用例编写', progress: 30, priority: 'low' },
  ];

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'high': return 'red';
      case 'medium': return 'orange';
      case 'low': return 'green';
      default: return 'blue';
    }
  };

  return (
    <Card 
      title="任务" 
      size="small" 
      className="h-full"
      styles={{ body: { padding: '12px' } }}
    >
      <div className="space-y-3">
        {tasks.map((task) => (
          <div key={task.id} className="space-y-1">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium truncate flex-1">{task.title}</span>
              <Tag color={getPriorityColor(task.priority)}>
                {task.priority}
              </Tag>
            </div>
            <Progress 
              percent={task.progress} 
              size="small" 
              strokeColor={getPriorityColor(task.priority)}
            />
          </div>
        ))}
      </div>
    </Card>
  );
};

export default TaskWidget;